import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import RedDot from '@COMPONENTS/RedDot/index'
import style from './HomeGrid.module.scss'

interface Props {
  onClick: () => void,
  src: string,
  text: string,
  unReadCount?: number,
  eventId?: string,
  showLogin?: () => void,
  disabledVerify?: boolean,
  newIcon?: string,
  bgColor: string
}

const HomeGrid: React.FC<Props> = ({
  onClick, src, text, unReadCount = 0, eventId,
  showLogin, disabledVerify, bgColor, newIcon
}) => (
  <LoginVerifyBtn
    className={style.homeCardItem}
    onClick={onClick}
    eventId={eventId}
    showLogin={showLogin}
    disabledVerify={disabledVerify}
  >
    <View className={style.iconContainer}>
      <Image src={src} className={style.homeGridIcon} />
      <View className={style.iconBg} style={{ backgroundColor: bgColor }} />
      {newIcon && <Image src={newIcon} className={style.homeNewIcon} />}
    </View>
    <Text className={style.girdTitle}>{text}</Text>
    {unReadCount > 0
    && <RedDot num={unReadCount} container={style.homeRedDotContainer} redTextClass={style.homeRedTextClass} />}
  </LoginVerifyBtn>
)

export default HomeGrid
